<template>
  <div>
    <van-nav-bar
  title="分类"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

    <van-sidebar v-model="activeKey" style="float: left;width: 20%" @change="onChange">
  <van-sidebar-item title="推荐" />
  <van-sidebar-item title="恋爱" />
  <van-sidebar-item title="运动" />
  <van-sidebar-item title="推理" />
  <van-sidebar-item title="恐怖" />
  <van-sidebar-item title="古风" />
  <van-sidebar-item title="亲子" />
  <van-sidebar-item title="科幻" />
</van-sidebar >
    <van-list
  style="float: left;width: 75%"
>
 <van-col span="24" v-for="ai_comic in list" >
                <router-link :to="'/comic/'+ai_comic.id">
                  <div style="width: 35%;margin: 10px;float: left">
                    <van-image
                        width="100%"
                        height="100"
                        :src="ai_comic.comic_img"
                        fit="fill"
                    />
                  </div>
                  <!--                        <p >{{ai_comic.name}}</p>-->
                  <div style="float: left;width: 50%;margin: 10px">
                          <span style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;
                              text-align: left;
                              ">名称：{{ ai_comic.name }}</span>
                    <br>
                    <span style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;
                              text-align: left;
                              ">年份：{{ ai_comic.comic_detail.yser }}</span>
                    <br>
                    <span style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;
                              text-align: left;
                              ">角色：{{ ai_comic.comic_detail.role }}</span>
                    <br>
                    <span style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;
                              text-align: left;
                              ">类型：<span v-for=" ind in ai_comic.comic_category">{{
                        type_list[ind - 1]
                      }}&nbsp;&nbsp;</span></span>

                  </div>
                </router-link>

              </van-col>
</van-list>


  </div>

</template>

<script>
export default {
name: "ShowAll",
  data(){
  return{
    activeKey:'',
    list: [],
      loading: false,
      finished: false,
     type_list: ['推荐', '恋爱', '运动', '推理', '恐怖', '古风', '亲子', '科幻'],
    course_id:0
  }
  },
  methods:{
  get_course_id() {
      // 获取地址栏上面的课程ID
      this.course_id = this.$route.params.pk || this.$route.query.pk;
      if (this.course_id < 0) {
        let _this = this;
        _this.$alert("对不起，当前类型不存在！", "警告", {
          callback() {
            _this.$router.go(-1);
          }
        });
      }
      // console.log(this.course_id)
    },
  onChange(index) {
      this.$axios.get(`${this.$settings.base_url}comic/comicorder/?comic_category=${index+1}`).then(res => {
        this.list=res.data

        })
    },
    onClickLeft(){
    this.$router.back()
    },


  },
  created() {
  this.get_course_id()
    this.activeKey=this.course_id
  this.$axios.get(`${this.$settings.base_url}comic/comicorder/?comic_category=${Number(this.course_id)+1}`).then(res => {
        this.list=res.data

        })



  }
}
</script>

<style scoped>

</style>